<template>
	<view class="creat-task">
		<view class="title">
			当前任务
		</view>
		<view class="task-card">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="map" color="#181B1F"></u-icon>仓库地址
					</view>
					<view class="">
						{{StoreageAddress}}
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="list-dot" color="#181B1F"></u-icon>任务编号
					</view>
					<view class="line-title">
						{{taskDetails.StoreageTaskSn}}
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>
						创建日期
					</view>
					<view>
						{{taskDetails.CreateDateTime}}
					</view>
				</view>

			</view>
		</view>
		<u-tabs-swiper class="tabs" ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
			active-color="#004FFF" inactive-color="#999999" bg-color="#efefef" swiperWidth="750"></u-tabs-swiper>
		<!-- tab页面切换数据 -->
		<view class="team-list" v-if="current==0">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="file-text" color="#181B1F"></u-icon>已扫描订单
					</view>
				</view>
				<view class="line">
					<view class="">
					</view>
					<view class="line-num">
						{{scansnum || 0}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="checkmark-circle" color="#181B1F"></u-icon>已确认订单
					</view>
				</view>
				<view class="line">
					<view class="">

					</view>
					<view class="line-num1">
						₱ {{affirm || 0}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="red-packet" color="#181B1F"></u-icon>应付金额
					</view>
				</view>
				<view class="line">
					<view class="">

					</view>
					<view class="line-num1">
						₱ {{amount || 0.00}}
					</view>
				</view>
			</view>
		</view>
		<view class="team-list" v-if="current==1">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>订单数量
					</view>
					<view class="line-num">
						0
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>订单金额
					</view>
					<view class="line-num">
						₱ 0
					</view>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="order-box">
				<view class="order-left">
					<view class="order-num">
						01
					</view>
					<view class="">
						<view class="">
							576564044703960224
						</view>
						<view class="money">
							<!-- 平台logo -->
							<img src="" alt="">
							₱ 199.50
						</view>
					</view>
				</view>
				<view class="order-right">
					<u-icon name="checkmark-circle-fill" color="#18BA3F" size="60"></u-icon>
				</view>
			</view>
		</view>

		<view class="btn-box">
			<u-button class="btn" type="success" shape="circle">取消任务</u-button>
			<u-button class="btn" type="primary" shape="circle" @click="onTask">提交任务</u-button>
		</view>
		<!-- 提交任务弹出层 -->
		<u-popup v-model="show" mode="center" border-radius="12" :closeable="false" width="660" height="1060">
			<view class="dialog-1">
				<view class="name">
					提交任务
				</view>
				<view class="text">
					请检查订单和金额信任无误再提交
				</view>
				<view class="card-border">
					<view class="line">
						<view class="line-title">
							<u-icon name="file-text" color="#181B1F"></u-icon>已扫描订单
						</view>
					</view>
					<view class="line">
						<view class="">
						</view>
						<view class="line-num">
							{{scansnum || 0}}
						</view>
					</view>
				</view>
				<view class="card-border">
					<view class="line">
						<view class="line-title">
							<u-icon name="checkmark-circle" color="#181B1F"></u-icon>已确认订单
						</view>
					</view>
					<view class="line">
						<view class="">

						</view>
						<view class="line-num1">
							₱ {{affirm || 0}}
						</view>
					</view>
				</view>
				<view class="card-border">
					<view class="line">
						<view class="line-title">
							<u-icon name="red-packet" color="#181B1F"></u-icon>应付金额
						</view>
					</view>
					<view class="line">
						<view class="">

						</view>
						<view class="line-num1">
							₱ {{amount || 0.00}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<u-button class="btn" type="success" shape="circle" @click="onClose">取消</u-button>
					<u-button class="btn" type="primary" shape="circle" @click="Confirm">确认</u-button>
				</view>
			</view>
		</u-popup>
		<view class="noinfo" v-if="none">
			还没有下级哦，快去邀请你的朋友来吧~
		</view>
		<tabbar :current='1'></tabbar>
	</view>
</template>

<script>
	import {
		CreateTask,
		CommitVerify,
		GetTask
	} from '@/api/all.js';
	import tabbar from '../components/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				tabs: [{
					name: '任务详情',

				}, {
					name: '订单详情',
				}],
				scansnum: 0, //已扫描数
				affirm: 0, //已确认数
				amount: 0, //总金额
				current: 0,
				none: false,
				show: false,
				taskDetails: {
					StoreageTaskSn: '',
					CreateDateTime: ''

				},
				taskId: '',
				StoreageAddress: uni.getStorageSync('userinfo').StoreageAddress,
				isopt: 1, //是否第一次进入页面
			}
		},
		onLoad(e) {
			this.CreateTask()
			if (e.taskId) {
				this.taskId = JSON.parse(e.taskId);
				this.isopt = 0
				uni.setStorageSync('taskid', this.taskId);
			} else {
				this.taskId = uni.getStorageSync('taskid')
			}
			console.log('this.taskId', this.taskId)

		},
		onShow() {
			this.scansnum = uni.getStorageSync('scansnum')
			// this.affirm=uni.getStorageSync('affirm')
			// this.amount=uni.getStorageSync('amount')
			if(this.taskId!=''){
				this.GetTask()
			}
			console.log('this', this.scansnum)
		},
		methods: {
			CreateTask() {
				let data = {

				}
				CreateTask(data).then(res => {
					uni.setStorageSync('isCreate', 1);
					if (this.isopt != 0) {
						this.taskId = res.data.Data.StoreageTaskId
						uni.setStorageSync('taskid', res.data.Data.StoreageTaskId);
					}
					let aaa = uni.getStorageSync('taskid')
					console.log('aaa', aaa)
					if (this.isopt != 0) {
						this.GetTask()
					}
					console.log('this.isopt', this.isopt)

					// uni.removeStorageSync('scansnum');
					// uni.removeStorageSync('affirm');
					// uni.removeStorageSync('amount');
				})
			},
			CommitVerify() {
				let data = {
					taskId: this.taskId
				}
				CommitVerify(data).then(res => {
					this.isopt = 1
					uni.setStorageSync('scansnum', 0);
					uni.setStorageSync('affirm', 0);
					uni.setStorageSync('amount', 0);
					// this.CreateTask()
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					uni.redirectTo({
						url:"../index/index"
					})
					// uni.removeStorageSync('isCreate');
				})
			},
			GetTask() {
				let data = {
					taskId: this.taskId
				}
				GetTask(data).then(res => {
					let data = res.data.Data
					this.taskDetails = data
					this.affirm = data.PackageCount
					this.amount = data.TaskMoney
					uni.setStorageSync('taskid', this.taskId);

					console.log('res.data', this.taskDetails, this.affirm, this.amount)
				})
			},
			Confirm() {
				this.CommitVerify()
				this.show = false;
			},
			tabsChange(e) {
				// this.current = e;
				if (e == 1) {
					uni.showToast({
						title: '暂未开放',
						icon: 'none'
					})
				}
				// this.getData();
			},
			onTask() {
				this.show = true;
			},
			onClose() {
				this.show = false;
			}

		}
	}
</script>

<style lang="scss">
	.creat-task {
		display: block;
		position: relative;
		width: 100%;
		// height: 100%;
		height: 100vh;
		background: #efefef;
		overflow: auto;

		.tabs {
			padding: 0 48rpx;
		}

		.title {
			font-size: 24px;
			color: #10275A;
			margin-top: 100rpx;
			padding: 0 48rpx;
		}

		.team-list {
			margin-top: 20rpx;
		}

		.task-card {
			margin-top: 30rpx;
		}

		.card {
			background-color: #fff;
			margin: 0 48rpx;
			padding: 32rpx;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
		}

		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			letter-spacing: 1px;
			// margin: 8px 0;
			line-height: 26px;

			.orderNum {
				font-size: 16px;
				font-weight: 500;
			}

			.line-title {
				display: flex;

			}
		}

		.line-num {
			font-size: 48rpx;
			font-weight: 600;
			color: #292D32;
		}

		.line-num1 {
			font-size: 48rpx;
			font-weight: 600;
			color: #376DFF;
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 32rpx;

			.btn {
				width: 320rpx;
			}
		}

		.dialog-1 {
			padding: 64rpx 32rpx;

			.name {
				font-size: 24px;
				color: #10275A;
				margin-bottom: 64rpx;
			}

			.text {
				font-size: 32rpx;
				color: #181B1F;
				margin-bottom: 64rpx;
			}

			.card-border {
				border: 1px solid #999999;
				margin-bottom: 30rpx;
				padding: 32rpx;
				border-radius: 16rpx;
			}
		}

		.order-box {
			margin: 0 48rpx;
			margin-bottom: 28rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-radius: 16rpx;

			.order-left {
				display: flex;

				.order-num {
					width: 96rpx;
					height: 44rpx;
					background: #F3F3F3;
					font-size: 28rxp;
					color: #10275A;
					text-align: center;
					border-radius: 12rpx;
					margin-right: 30rpx;
				}

				.money {
					font-size: 32rpx;
					font-weight: 600;
					color: #0052D9;
					display: flex;
					align-items: center;
				}
			}

		}


	}
</style>
